<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box{
                width: 1000px;
                border: 3px solid #f00;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .post{
                display: flex;
                flex-direction: column;
            }
        </style>
        <script>
            window.onload = function(){
                var btn = document.getElementById('post-btn');
                var list = document.getElementById('list');
                var inp = document.getElementById('inp');
                
                btn.onclick = function () {
                    if(inp.value.indexOf('tmd')>-1){
                        alert('请输入文明用语')
                    }else{
                        if(inp.value.length>5){
                            list.innerHTML += '<li>' + inp.value.slice(0,5)+'...' + '</li>'
                        }else{
                            list.innerHTML += '<li>' + inp.value + '</li>'
                        }
                        // list.innerHTML += '<li>' + inp.value + '</li>'
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="box">
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>1</li>
                <li>2</li>
                <li>1</li>
                <li>2</li>
            </ul>
            <div class="post">
                <input id="inp" type="text">
                <button id="post-btn" style="margin-top: 10px;">发布</button>
            </div>
        </div>
        
    </body>
</html>